<style>
    .ivu-breadcrumb{
        font-size:15px;
        color:#1E385D;
    }
    .ivu-breadcrumb-item-separator{
         color:#1E385D;
    }
    .ivu-breadcrumb a{
        color:#1E385D;
        font-weight:none;
    }
</style>
<template>
     <div class="layout-header" style="position: fixed;top:80px; z-index:998;background:#F8F8F9;width:98%;height:30px">
                    <label style="float:left;margin:5px;font-size:14px;color:#4B4C4E">
                    <Icon type="ios-location" size="20"></Icon>&nbsp;&nbsp;当前位置:</label>
                    <div class="layout-breadcrumb" >
                        <Breadcrumb separator="/">
                            <Breadcrumb-item href="/home">
                                <Icon type="ios-home" size="20"></Icon> 首页
                            </Breadcrumb-item>
                            <Breadcrumb-item :href="item.RouterUrl" v-for="item in BreadcrumbItem" :key="item.RouterIcon">
                                <Icon :type="item.RouterIcon" :size="item.RouterIconSize"></Icon> {{item.RouterName}}
                            </Breadcrumb-item>
                        </Breadcrumb>
                    </div>
                </div>
</template>
<script>
 export default {
    data:function(){
        return {
            BreadcrumbItem:[]
        }
    },
    methods: {
        getBreadcrumb() {
            this.BreadcrumbItem = this.$store.state.BreadcrumbItem;
        }
    },
    created: function () {
        this.getBreadcrumb();
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        "$route": "getBreadcrumb"
    }
 }
</script>